<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消消乐</title>
    <style>
      #cancellation-get,
      #cancellation-area {
        width: 600px;
        height: auto;
        padding: 5px;
        border: 2px solid #d8d8d8;
        background-color: #f5f5f5;
      }
      #cancellation-get > div,
      #cancellation-area > div {
        /* display: inline-block;
        line-height: 50px;
        text-align: center; */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: green;
        color: white;
        margin: 5px;
        cursor: pointer;
        /* visibility: hidden; */
      }
    </style>
  </head>
  <body>
    <h1>消消乐</h1>
    <div id="cancellation-area" onclick="cancellationWork(event)"></div>

    <div id="cancellation-get"></div>
    <script>
      var len = 60;
      var workArr = [];
      var getDom = document.getElementById("cancellation-get");
      function cancellationWork(e) {
        if (cancellationItems.includes(e.target.innerHTML)) {
          workArr.push({ dom: e.target, val: e.target.innerHTML });
          getDom.appendChild(e.target.cloneNode(true));
          e.target.style.visibility = "hidden";
          // e.target.style.backgroundColor = "red";
          // console.log(666.005, workArr.length);
          if (workArr.length > 2) {
            if (workArr.every((el) => workArr[0].val === el.val)) {
              workArr.forEach((el) => {
                // el.dom.style.display = "none";
                el.dom.style.visibility = "hidden";
              });
              workArr = [];
            } else {
              workArr.forEach((el) => {
                el.dom.style.backgroundColor = "green";
              });
              workArr = [];
            }
            // 作业：熟悉一下Array数组的用法
            // function aa(el){
            //   return workArr[0].val === el.val
            // }
          }
        }
      }
      var cancellationHtml = "";
      var cancellationItems = ["A", "B", "C", "D", "E", "F", "G"];
      var cancellationArr = [];
      // 生成消消乐的数组
      for (let i = 0; i < len / 3; i++) {
        const tmpVal =
          cancellationItems[
            parseInt(Math.random() * (cancellationItems.length - 1))
          ];
        cancellationArr.push(tmpVal, tmpVal, tmpVal);
      }
      // console.log(666.001, cancellationArr);

      // 打乱消消乐的数组
      for (let i = len - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        // console.log(666.111, j, i);
        if (i !== j) {
          [cancellationArr[i], cancellationArr[j]] = [
            cancellationArr[j],
            cancellationArr[i],
          ];
        }
      }
      // console.log(666.002, cancellationArr);

      // 生成消消乐的DOM
      for (let i = 0; i < len; i++) {
        cancellationHtml += `<div>${cancellationArr[i]}</div>`;
      }
      document.getElementById("cancellation-area").innerHTML = cancellationHtml;
    </script>
  </body>
</html>
